<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="select">
      <nav class="option">
        <li
          v-for="(item, index) in category"
          :key="index"
          @click="changeAction(item.text, index)"
          :class="{ active: value === index }"
        >
          <img :src="value === index ? item.icon : item.icon1" alt="" />
          <span>{{ item.text }}</span>
        </li>
      </nav>
      <div class="doctor">
        <div class="medicine">
          <nav class="medicine-list">
            <li
              v-for="(item, index) in medicineList"
              :key="index"
              @click="categoryAction(index, item)"
            >
              <span :class="{ classify: classify == index }"> {{ item }}</span>
            </li>
          </nav>
        </div>
        <div class="team">
          <h1 class="team-title">共12支相关知名专家团队</h1>
          <nav class="team-list">
            <li
              v-for="(item, index) in expertDeam"
              :key="index"
              @click="expertDeamAction(item._id)"
            >
              <div class="list-left"><img :src="item.img" alt="" /></div>
              <div class="list-right">
                <h2 class="h2-title">{{ item.name }}知名专家团队</h2>
                <p class="span-department">{{ section }}科</p>
                <p class="span-excel">{{ item.context }}</p>
                <span class="span-state" v-if="item.num">有号</span>
                <span class="span-state" style="color: #ccc" v-else>约满</span>
              </div>
            </li>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      category: [
        {
          icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E7%A7%91%E5%AE%A4/u353.png",
          icon1:
            "https://cdn7.axureshop.com/demo/1763441/images/%E4%B8%93%E5%AE%B6%E5%9B%A2%E9%98%9F/u994.png",
          text: "按科室挂号",
        },
        {
          icon: "https://cdn7.axureshop.com/demo/1763441/images/%E4%B8%93%E5%AE%B6%E5%9B%A2%E9%98%9F/u993.png",
          icon1:
            "https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E7%A7%91%E5%AE%A4/u352.png",
          text: "知名专家团队",
        },
      ],
      medicineList: [
        "全部",
        "综合",
        "肿瘤",
        "妇产",
        "内分泌",
        "高血压",
        "泌尿",
        "口腔",
        "眼科",
      ],
      teamList: [
        // {
        //   icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u154.png",
        //   title: "杨爱明知名专家团队",
        //   department: "肿瘤科",
        //   excel:
        //     "擅长：肺部肿瘤、食管癌、胃贲门癌、各种食管良性病变、纵隔良恶性肿瘤",
        //   state: "有号",
        // },
        // {
        //   icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u156.png",
        //   title: "杨爱明知名专家团队",
        //   department: "肿瘤科",
        //   excel:
        //     "擅长：肺部肿瘤、食管癌、胃贲门癌、各种食管良性病变、纵隔良恶性肿瘤",
        //   state: "有号",
        // },
        // {
        //   icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u168.png",
        //   title: "杨爱明知名专家团队",
        //   department: "肿瘤科",
        //   excel:
        //     "擅长：肺部肿瘤、食管癌、胃贲门癌、各种食管良性病变、纵隔良恶性肿瘤",
        //   state: "有号",
        // },
        // {
        //   icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u156.png",
        //   title: "杨爱明知名专家团队",
        //   department: "肿瘤科",
        //   excel:
        //     "擅长：肺部肿瘤、食管癌、胃贲门癌、各种食管良性病变、纵隔良恶性肿瘤",
        //   state: "有号",
        // },
      ],
      value: 1,
      classify: 0,
      section: "综合",
    };
  },
  computed: {
    ...mapState("DoctorList", ["expertDeam"]),
  },
  methods: {
    // 按科室挂号
    changeAction(text, index) {
      this.value = index;
      if (index == 0) {
        this.$router.push({
          name: "SelectDepartment",
          params: { text },
        });
      }
    },
    // 科类
    categoryAction(cc, item) {
      this.classify = cc;
      console.log(item);
      if (item == "全部") {
        this.section = "综合";
        return;
      }
      this.section = item;
    },
    // 跳转团队详情页
    expertDeamAction(id) {
      this.$router.push({
        name: "TeamDetailsPage",
        params: { text: "团队详情页", id ,item:`${this.section}科`},
      });
    },
  },
  created() {
    console.log(this.$store);
    this.$store.dispatch("DoctorList/doctorData");
    // this.$store.commit("DoctorList/doctorDetails")
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.select {
  position: relative;
  top: 46px;
  left: 0;
  z-index: 1;
  height: 100%;
  overflow: auto;
  //   background-color: #000;
  &::-webkit-scrollbar {
    display: none;
  }
  .option {
    position: fixed;
    display: flex;
    background-color: #fff;
    width: 100%;
    z-index: 1;
    li {
      width: 50%;
      height: vw(59);
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid rgba(242, 242, 242, 1);
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      &:first-child {
        border-right: 1px solid rgba(242, 242, 242, 1);
      }
      img {
        width: vw(18);
        height: vw(22);
      }
      span {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: vw(14);
        color: #333;
        margin: vw(8);
      }
    }
    .active {
      background-color: #2ec7c9;

      span {
        color: #fff;
      }
    }
  }

  .doctor {
    // height: 100%;
    overflow: auto;
    padding-top: vw(59);
    padding-bottom: vw(45);

    .medicine {
      height: vw(156);

      background-color: #fff;
      padding-left: vw(35);
      padding-top: vw(30);
      box-sizing: border-box;
      .medicine-list {
        width: vw(230);
        height: vw(90);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        li {
          width: 33.33%;
          flex-shrink: 0;
          text-align: center;
          span {
            border: 1px solid rgba(242, 242, 242, 1);
            box-sizing: border-box;
            padding: vw(3) vw(8);
            font-family: "微软雅黑";
            font-weight: 400;
            font-style: normal;
            font-size: vw(14);
            color: #333;
            border-radius: vw(3);
          }
          .classify {
            color: #fff;
            background-color: #2ec7c9;
          }
        }
      }
    }
    .team {
      margin-top: vw(10);
      background-color: #fff;
      .team-title {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        color: #999999;
        font-size: vw(13);
        padding-left: vw(10);
        padding-top: vw(15);
        padding-bottom: vw(15);
        box-sizing: border-box;
      }
      .team-list {
        li {
          border-top: 1px solid rgba(242, 242, 242, 1);
          display: flex;
          padding: vw(15);
          box-sizing: border-box;
          .list-left {
            width: vw(50);
            height: vw(50);
            margin-right: vw(10);
            img {
              height: 100%;
            }
          }
          .list-right {
            position: relative;
            font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
            font-weight: 400;
            font-style: normal;
            .h2-title {
              font-size: vw(14);
              color: #333;
              margin-bottom: vw(8);
            }
            .span-department {
              font-size: vw(12);
              margin-bottom: vw(8);
            }
            .span-excel {
              font-size: vw(12);
              color: #999999;
              line-height: vw(28);
            }
            .span-state {
              position: absolute;
              color: #2ec7c9;
              font-size: vw(14);
              right: vw(20);
              top: vw(0);
            }
          }
        }
      }
    }
  }
}
</style>
